<template>
  <div>
    <Top title="我要反馈" iconShow="1"></Top>
    <div class="feedback">
      <div class="feedback-content">
        <p class="title">反馈问题类型</p>
        <div class="btn-group">
          <mt-button type="default" :class="{'mint-button--primary':(index+1)==select}" v-for="(item,index) in question" :key="index" @click="selectBtn(index)">{{item.type}}</mt-button>
        </div>
        <input class="tel" placeholder="请输入手机号码" v-model="feedback.tel" />
        <textarea placeholder="请选择问题类型，帮助我们更快的出来您的反馈" class="textarea" v-model="feedback.text"></textarea>
        <span style="color:red" v-if="warning">问题反馈需最少输入5个汉字</span>
      </div>
      <mt-button type="primary" class="submit" @click="submit">提交</mt-button>
    </div>
  </div>
</template>
<script>
import Top from '../components/Header'
import { MessageBox } from 'mint-ui';
export default {
  name: 'login',
  data() {
    return {
      select: 1,
      question: [
        { type: '借款问题' },
        { type: '体验问题' },
        { type: '其他' }
      ],
      feedback: {
        tel: '',
        text: ''
      },
      warning:false
    }
  },
  mounted(){
    document.setTitle('我要反馈');
  },
  methods: {
    selectBtn(index) {
      this.select = index + 1;
      // console.log(this.select)
    },
    submit() {
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      let postData = {
        borrowerId: borrowerId,
        type: this.select,
        content: this.feedback.text,
        reservePhone: this.feedback.tel
      }
      if(!this.feedback.tel){
        MessageBox.alert('手机号码不能为空~', '提示')
      }else if (!(/^1[34578]\d{9}$/.test(this.feedback.tel))) {
        MessageBox.alert('请输入正确的手机号码~', '提示')
      } else if (this.feedback.text.length<5) {
        // MessageBox.alert('问题反馈需最少输入5个汉字，最多输入60个汉字~', '提示')
        this.warning = true;
      } else {
        this.$http.post('/loansupermarket-app/personal/saveCustomerFeedBack.do', postData)
          .then((response) => {
            var resBody = response.body;
            // console.log(resBody)
            if (resBody.code == '000') {
              MessageBox.alert('您反馈的意见已提交！我们会尽快会处理').then(action => {
                this.$router.go(-1);
              });
            } else if(resBody.code == '444') {
              this.$router.push({path:'/login',query:{history:1}})
            }else{
              MessageBox.alert(resBody.mesg);
            }
          }).catch(function () {
            alert("接口请求失败!")
          });
      }


    }
  },
  components: { Top }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.feedback {
  text-align: left;
  margin-top: 1.2rem;
  &-content {
    box-sizing: border-box;
    padding: 0.75rem 0.4rem 0 0.4rem;
    height: 8.36rem;
    background: #fff;
    .title {
      text-align: left;
      padding-left: 0.28rem;
      border-left: 2px solid $primaryColor;
      font-size: 0.36rem;
      margin: 0;
    }
    .btn-group {
      margin-top: 0.4rem;
      .mint-button {
        width: 2.55rem;
        height: 0.8rem;
        font-size: 0.4rem;
        &:nth-child(2),
        &:nth-child(3) {
          margin-left: 0.4rem;
        }
      }
    }
    .tel {
      width: 100%;
      height: 1.1rem;
      line-height: 0.8rem;
      border-radius: 4px;
      outline: none;
      border: 1px solid $iconColor;
      box-sizing: border-box;
      padding-left: 0.42rem;
      margin-top: 0.65rem;
    }
    .textarea {
      width: 100%;
      font: 13.3333px Arial;
      line-height: 0.4rem;
      outline: none;
      height: 3.25rem;
      border-radius: 4px;
      margin-top: 0.4rem;
      box-sizing: border-box;
      padding: 0.24rem 0.34rem;
    }
  }
  .submit {
    width: 93%;
    height: 1.2rem;
    margin: 0.9rem 3.5%;
  }
}
</style>


